<template>
  <section class="page components call-bar" v-loading="!loginStatus">
    <span>当前呼叫号码：{{ callNumber }}</span>
    <el-button @click="hangUp" :disabled="!callId && isHangUp" class="btn-call"
      >挂断</el-button
    >
  </section>
</template>

<script lang="ts">
import { Vue, Component, Watch, Emit } from "vue-property-decorator";
import { namespace } from "vuex-class";
import state from "~/store/state";
// import CallOperation from "~/utils/call-center/call-operation";
const callCenterStore = namespace("call-center");

@Component({
  name: "call-bar"
})
export default class CallBar extends Vue {
  @callCenterStore.State private loginStatus!: boolean;
  @callCenterStore.State private callNumber!: string;
  @callCenterStore.State private callId!: string;
  @callCenterStore.Action private finished: () => void;
  @callCenterStore.Mutation private updateIsHangUp;
  // private callOperator?: CallOperation;

  private status = {
    login: false,
    sign: false,
    line: "FREE"
  };

  public mounted() {
    if (this.loginStatus) {
      // this.callOperator = new CallOperation();
    }
    // if (this.callOperator) {
      // this.callOperator.onAgentEvent().subscribe(x => {
      //   if (x.agentStatus === "2") {
      //     this.emitClose();
      //     this.updateIsHangUp(true);
      //   }
      // });
    // }
  }

  @Emit("close") private emitClose() {}

  private hangUp() {
    // if (!this.callOperator) return;
    // this.callOperator.hangUp().subscribe(x => {
    //   this.finished();
    // });
  }
}
</script>

<style lang="less" scoped>
.btn-call {
  margin-left: 20px;
}
</style>
